<template>
  <k-form-modal
    drawer
    width="middle"
    title="打款审核"
    label-width="100px"
    v-bind="formModalState"
    v-on="formModalEvent"
  >
    <div class="title">打款申请信息</div>
    <el-form-item label="申请结算金额">
      ￥{{ rowData.total_fee }}
    </el-form-item>
    <el-form-item label="打款信息">
      户名：{{ rowData.bank_user_name }}<br />
      开户行：{{ rowData.bank_address }}<br />
      银行卡号：{{ rowData.bank_no }}
    </el-form-item>
    <el-form-item label="开票信息">
      <ImgDownPreview :url="rowData.invoice" />
    </el-form-item>
    <el-form-item
      label="打款审核"
      prop="status"
    >
      <el-radio-group v-model="state.model.status">
        <el-radio
          v-for="item in statusOptions"
          :key="item.value"
          :label="item.value"
        >{{ item.label }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      v-show="state.model.status ===1"
      label="实际需打款"
      prop="punch_fee"
    >
      <el-input v-model="state.model.punch_fee" clearable placeholder="请输入实际打款金额" maxlength="10" />
    </el-form-item>
    <el-form-item label="备注说明" prop="remark">
      <el-input
        v-model="state.model.remark"
        maxlength="200"
        allow-clear
        placeholder="请输入备注"
        show-word-limit
        type="textarea"
        rows="4"
      />
    </el-form-item>
  </k-form-modal>
</template>

<script setup lang='ts'>
import { ref, reactive, computed } from 'vue';
import { useFormModal } from '@crud/index';
import { cashAudit } from '@/api/crm-agency/dyj/lecturer';
import { ElMessage } from 'element-plus';
import { ImgDownPreview } from '@/components/base-img';
defineOptions({
  name: 'LecturerExamineModal'
});
const emits = defineEmits(['success']);
const rowData = ref<Record<string, any>>({});
const statusOptions = ref([
  { label: '同意', value: 1 },
  { label: '驳回', value: 2 }
]);
const { state, formModalState, formModalEvent, ...methods } = useFormModal({
  model: {
    remark: '',
    punch_fee: undefined,
    status: null,
    id: undefined
  },
  rules: {
    state: [{ required: true, message: '请选择打款审核状态' }],
    punch_fee: [
      { required: true, message: '请选输入实际需打款金额' },
      { pattern: /^[0-9]+\.{0,1}[0-9]{0,5}$/, message: '请输入数字', trigger: ['change', 'blur'] }
    ],
    remark: [{ required: true, message: '请输入备注' }]
  },
  onShow: (mode = 0, data: any) => {
    rowData.value = {};
    if (data) {
      rowData.value = {
        ...data
      };
      state.model = {
        punch_fee: data.punch_fee,
        remark: data.remark,
        status: data.state,
        id: data.id
      };
    }
  },
  onSubmit: async (model: any, mode = 0) => {
    if (mode === 1) {
      const res = await cashAudit({
        ...model,
        punch_fee: model.status === 1 ? model.punch_fee : 0
      });
      if (!res.err) {
        ElMessage.success('打款审核成功');
        emits('success');
      }
      return res;
    }

  }
});
defineExpose({
  show: methods.show
});
</script>
<style scoped lang="scss">
:deep(.img-down-preview) {
  margin-right: 10px;
}

.title {
  margin-bottom: 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
</style>
